#!/usr/bin/env node

/**
 * 热启动演示脚本
 * 展示 UI 包热启动的实际工作原理
 */

const fs = require('fs');
const path = require('path');
const { execSync } = require('child_process');

console.log('🎬 UI 包热启动演示\n');

// 演示步骤
const steps = [
  {
    title: '1. 检查当前配置',
    action: () => {
      console.log('📋 检查 UI 包配置...');
      const uiPath = path.join(__dirname, '../packages/ui');
      const configFiles = ['package.json', 'tsup.config.ts', 'src/button.tsx'];
      
      configFiles.forEach(file => {
        const filePath = path.join(uiPath, file);
        if (fs.existsSync(filePath)) {
          console.log(`✅ ${file} 存在`);
        } else {
          console.log(`❌ ${file} 不存在`);
        }
      });
    }
  },
  {
    title: '2. 展示文件结构',
    action: () => {
      console.log('\n📁 当前文件结构:');
      const uiPath = path.join(__dirname, '../packages/ui');
      
      function showTree(dir, prefix = '') {
        const items = fs.readdirSync(dir);
        items.forEach((item, index) => {
          const itemPath = path.join(dir, item);
          const isLast = index === items.length - 1;
          const stat = fs.statSync(itemPath);
          
          if (stat.isDirectory()) {
            console.log(`${prefix}${isLast ? '└── ' : '├── '}${item}/`);
            if (item !== 'node_modules' && item !== '.git') {
              showTree(itemPath, prefix + (isLast ? '    ' : '│   '));
            }
          } else {
            console.log(`${prefix}${isLast ? '└── ' : '├── '}${item}`);
          }
        });
      }
      
      showTree(uiPath);
    }
  },
  {
    title: '3. 展示构建配置',
    action: () => {
      console.log('\n⚙️ tsup 构建配置:');
      const configPath = path.join(__dirname, '../packages/ui/tsup.config.ts');
      const config = fs.readFileSync(configPath, 'utf8');
      
      // 提取关键配置
      const keyConfigs = [
        'entry:',
        'format:',
        'dts:',
        'sourcemap:',
        'minify:',
        'treeshake:',
        'external:'
      ];
      
      keyConfigs.forEach(key => {
        const lines = config.split('\n').filter(line => line.includes(key));
        if (lines.length > 0) {
          console.log(`  ${lines[0].trim()}`);
        }
      });
    }
  },
  {
    title: '4. 展示工作流程',
    action: () => {
      console.log('\n🔄 热启动工作流程:');
      console.log('  1. 开发者修改 packages/ui/src/button.tsx');
      console.log('  2. tsup 文件监听器检测到变化');
      console.log('  3. esbuild 快速编译 TypeScript');
      console.log('  4. 生成 packages/ui/dist/button.js');
      console.log('  5. 其他项目自动引用新文件');
      console.log('  6. 浏览器实时更新 UI');
    }
  },
  {
    title: '5. 性能对比',
    action: () => {
      console.log('\n⚡ 性能对比:');
      console.log('  tsup (esbuild):    < 100ms');
      console.log('  Webpack:           ~ 1000ms');
      console.log('  Rollup:            ~ 500ms');
      console.log('  Vite:              ~ 200ms');
      console.log('');
      console.log('  🏆 tsup 比传统工具快 10-100 倍！');
    }
  },
  {
    title: '6. 实际测试',
    action: () => {
      console.log('\n🧪 实际测试步骤:');
      console.log('  1. 运行: pnpm dev:ui');
      console.log('  2. 运行: pnpm dev (在另一个终端)');
      console.log('  3. 修改 packages/ui/src/button.tsx');
      console.log('  4. 观察浏览器自动更新');
      console.log('');
      console.log('  💡 你应该能在 1-2 秒内看到变化！');
    }
  }
];

// 执行演示步骤
steps.forEach((step, index) => {
  console.log(`\n${'='.repeat(50)}`);
  console.log(`📝 ${step.title}`);
  console.log(`${'='.repeat(50)}`);
  
  try {
    step.action();
  } catch (error) {
    console.error(`❌ 步骤 ${index + 1} 执行失败:`, error.message);
  }
});

console.log('\n🎯 演示完成！');
console.log('\n📚 更多信息:');
console.log('  - 详细工作流程: docs/hot-reload-workflow.md');
console.log('  - UI 包开发指南: packages/ui/DEV_GUIDE.md');
console.log('  - 配置总结: UI_HOT_RELOAD_SETUP.md');
console.log('\n�� 开始你的热启动开发之旅吧！'); 